<template>
    <div class="dialog-footer" v-if="showButton">
        <template v-for="(item, index) in data">
            <template v-if="item.render">
                <virtual-node :key="index" :render="item.render" />
            </template>
            <template v-else>
                <custom-button :key="index" v-if="typeof item.filter === 'function' ? item.filter(item) : true"
                               :options="item" @click="handleClick(item)" />
            </template>
        </template>
    </div>
</template>

<script>
import { ElButton, genProps } from "../../custom/attributes";

export default {
    name: "buttons",
    components: {
        CustomButton: () => import('../../custom/Button'),
        VirtualNode: {
            functional: true,
            props: {
                render: Function,
            },
            render(h, ctx) {
                if (typeof ctx.props.render === 'function') {
                    return ctx.props.render(h, ctx.parent);
                }
            },
        },
    },
    props: {
        data: {
            type: Array,
            default() {
                return [];
            },
        }
    },
    data() {
        return {
            defaultProps: {
                size: null,
                type: null,
                plain: false,
                round: false,
                circle: false,
                disabled: false,
                icon: null,
                autofocus: false,
                nativeType: 'button',
            },
        };
    },
    computed: {
        showButton() {
            return this.$utils.isNotEmptyList(this.data);
        },
    },
    methods: {
        btnProps(item) {
            return genProps(ElButton, item);
        },
        handleClick(item) {
            this.$emit('event', {
                type: 'click',
                item,
            });
        },
    },
}
</script>

<style scoped>

</style>
